<template>
    <view class="page">
        <view class="step">
			<view class="step-items">
			    <view class="step-items1">1</view>
			    <view class="step-items1-name">绑定卡板</view>
			</view>
            <view class="step-items">
                <view class="step-items1">2</view>
                <view class="step-items1-name">购买套餐</view>
            </view>
            <view class="step-items">
                <view class="step-items1">3</view>
                <view class="step-items1-name">实名激活</view>
            </view>
        </view>
        <view class="card-icon">
            <image src="./../../static/img/icon15.png" alt="">
        </view>
        <view class="card-msg">根据相关法律法规需要进行实名认证实名认证成功后即可使用本流量卡</view>
        <view class="card-msg-small">填写并提交实名认证后，因运营商需要人工审核，请耐心等待10-20分钟，在此期间无需重复提交</view>
        <view class="card-msg-small">再次打开查询充值链接，即可查询最新实名状态</view>
        <u-button type="primary" block shape="circle" color="#397EF5" @click="realNameRegister">去实名认证</u-button>
    </view>
</template>

<script>
	export default{
		methods:{
			realNameRegister(){
				this.$api.authUrl({iccid:uni.getStorageSync('iccid') || '',supplierCode:uni.getStorageSync('userInfo').supplierCode || ''}).then(res=>{
					// code=409 表示是联调，需要跳转联通小程序实名。
					// code=408 表示是电信，直接跳转 data里面的链接
					// code=407 表示是移动, 直接跳转data里面链接。
					if(res.code === '407' || res.code === '408' ){
						//#ifdef H5
						window.location.href = res.data
						//#endif
						//#ifdef APP-PLUS
						plus.runtime.openURL(res.data)
						//#endif
					}else if(res.code === '409'){
						
					}else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
    padding-top:30px;
    background: #fff;
    .step{
        width:70%;
        margin:0 auto;
        display: flex;
        position: relative;
        justify-content:space-between;
        &::after{
            display: block;
            content: '';
            height:1px;
            width:80%;
            border-top:1px dashed #979797;
            position: absolute;
            top:16px;
            left:34px;
            z-index: 0;
        }
        .step-items{
            position: relative;
            z-index: 1;
        }
        .step-items1{
            width: 33px;
            height: 33px;
            border-radius:100%;
            text-align: center;
            line-height:33px;
            color: #fff;
            margin:0 auto;
            background: #397EF5;
        }
        .step-items1-name{
            height: 21px;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 21px;
            margin-top:10px;
        }
    }
    .card-icon{
        width:136px;
        height: 112px;
        margin:38px auto 16px;
        image{
            width:100%;
            height:100%;
        }
    }
    .card-msg{
        width:80%;
        margin: 0 auto 56px;
        text-align: center;
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #28292D;
        line-height: 25px;
    }
    .card-msg-small{
        background: #F4F6FA;
        width:88%;
        padding: 11px;
        color: #999;
        font-size: 14px;
        line-height: 22px;
        margin:0 auto 11px;
    }
    .u-button{
        width:90%;
        margin:158px auto 0;
    }
}
</style>